<template>
	<div class="gold-new-popup">
		<cl-popup direction="center" :visible.sync="visible" @close="req">
			<img class="bg" src="@/assets/2/images/red-package/gold-new.png" alt="" />

			<div class="wrap">
				<button class="rec" @click="next">收下金币</button>

				<img @click="close" class="close" src="@/assets/2/images/close.png" />
			</div>
		</cl-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import ClPopup from '@/components/popup';
import { Toast } from 'vant';

export default {
	components: {
		ClPopup
	},

	data() {
		return {
			visible: false
		};
	},

	computed: {
		...mapGetters(['bwbt_userInfo'])
	},

	watch: {
		'bwbt_userInfo.isBwbtNerPerson': {
			immediate: true,
			handler(val) {
				if (val) {
					this.open();
				}
			}
		}
	},

	methods: {
		open() {
			this.visible = true;
		},

		close() {
			this.visible = false;
			this.req();
		},

		next() {
			this.req().then(() => {
				this.visible = false;
			});
		},

		req() {
			return this.$service.bwbt.bwbtGold
				.newPersonReceiveGold()
				.then(() => {
					this.$store.dispatch('GET_BWBT_USERINFO');
					this.$emit('done');
				})
				.catch(err => {
					Toast(err.message);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.gold-new-popup {
	/deep/.cl-popup {
		border-radius: 20px 20px 0 0;
		background-color: transparent;
		overflow: visible;

		&__container {
			height: 900px;
			overflow: visible;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 910px;
		width: 600px;
		z-index: 2;
	}

	.rec {
		height: 68px;
		border-radius: 30px;
		background-image: linear-gradient(to bottom, #f83f12, #ff542d);
		color: #fff;
		font-size: 26px;
		letter-spacing: 2px;
		border: 0;
		width: 360px;
		box-shadow: 0 4px 1px 1px #d9340b;
		position: absolute;
		bottom: 270px;
	}

	.close {
		position: absolute;
		bottom: 50px;
		height: 66px;
		width: 66px;
	}
}
</style>
